<template>
  <div class="home">
    <div class="xpanel">
      <!-- 地图飞线 -->
      <div class="fill-h" id="flyMap"></div>
    </div>
  </div>
</template>
<script>
import '../../public/js/map-china.js'
import _ from 'lodash'
export default {
  name: 'Home',
  components: {},
  data () {
    return {
      flyMap: null // 地图飞线
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    window.addEventListener('resize', _.throttle(this.windowResize, 500, { trailing: false }))
    this.flyMapOpt()
  },
  methods: {
    flyMapOpt () {
      const flySeries = []
      this.flyMap = this.$echarts.init(document.getElementById('flyMap'))
      const options = {
        title: {
          show: false,
          text: '地图飞线',
          x: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            if (params.value) {
              return params.name + ' : ' + params.value[2]
            } else {
              return params.name
            }
          }
        },
        geo: {
          map: 'china',
          roam: false, // 开启鼠标缩放和漫游
          zoom: 1, // 地图缩放级别
          selectedMode: false, // 选中模式：single | multiple
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          layoutCenter: ['50%', '50%'], // 设置后left/right/top/bottom等属性无效
          layoutSize: '100%', // 保持地图宽高比
          label: {
            emphasis: {
              // 鼠标移入高亮显示省份名称
              show: false
            }
          },
          itemStyle: {
            normal: {
              // 地图背景颜色
              areaColor: '#101f32',
              // 边界区域线 宽
              borderWidth: 1.1,
              // 编辑区域线颜色
              borderColor: '#43d0d6'
            },
            emphasis: {
              // 鼠标移入地图颜色
              areaColor: '#069'
            }
          }
        },
        series: flySeries
      }
      this.flyMap.setOption(options)
    },
    windowResize () {
      this.flyMap.resize()
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.windowResize)
  }
}
</script>
<style lang="scss" scoped>
.xpanel {
  padding: 15px;
  background-size: 100% 100%;
  box-sizing: border-box;
}

/* tool */
.fill-h {
  width: 100%;
  height: 600px;
}
</style>
